<template>
  <div class="ai_container">
    <div class="abg"></div>
    <div class="head">
      <div class="hleft">
        <img @click="back" :src="arrowleft" alt="" srcset="" />
        <span class="name">{{ title }}</span>
      </div>
      <div class="hright">
        <div class="chat chat-zhnawei">{{ text }}</div>
        <div class="chat" ref="typeArea">!</div>
        <!-- <div class="chat1" v-show="false">{{ text }}</div> -->
        <img :src="Bot" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash';
import { onMounted, ref, toRefs, watch } from 'vue';
import { typewriter } from '@/utils/typewriter';
import arrowleft from '@/assets/ai/arrowleft.svg';
import Bot from '@/assets/ai/bot.gif';

const typeArea = ref<HTMLElement | null>(null);

const props = defineProps({
  title: String,
  text: {
    type: String,
    // 您好，请告诉我下列信息，我将结合课程标准、教材内容以及其它教参资源，为您定制教案！
    default: '',
  },
});

const { title, text } = toRefs(props);

onMounted(() => {});
const writeing = () => {
  typewriter({
    el: typeArea.value,
    text: text?.value || '',
    speed: 100,
    onFinished: () => {
      // console.log("打字完成");
    },
    removeCursorAfterFinish: true, // ✅ 打完后删除光标
  });
};
watch(
  () => props.text,
  val => {
    if (val) {
      text.value = val;
      writeing();
    }
  },
  { immediate: true, deep: true },
);
const emits = defineEmits(['back']);
const back = () => {
  emits('back');
};
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>

<style lang="scss">
/* 光标样式 */
.typewriter-cursor {
  display: inline-block;
  width: 0;
  background-color: black;
  animation: blink 0.7s steps(1) infinite;
  margin-left: 2px;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
